<template>
  <a-layout class="layout">
    <a-layout-header>
     <Header />
    </a-layout-header>
    <a-layout-content style="padding: 0 50px">
      <div class="errorContent">
        <div class="title">
          Oops! The page can't be found.
        </div>
        <div class="dec">
          Explore more Android apps and games below!
        </div>
        <div class="search">
          <a-input style="width:40%" placeholder="Search for apps & games" />
          <div class="btn">
              <div style="display: flex;align-items: center;gap:8px">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M14 14L11.1333 11.1333M12.6667 7.33333C12.6667 10.2789 10.2789 12.6667 7.33333 12.6667C4.38781 12.6667 2 10.2789 2 7.33333C2 4.38781 4.38781 2 7.33333 2C10.2789 2 12.6667 4.38781 12.6667 7.33333Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span class="text">search</span>
              </div>
          </div>
        </div>
      </div>
      <HotList :isIndex="true" :list="hotGames" :name="'HOT ' + $t('games')"/>
      <HotList :isIndex="true" :list="hotApps" :name="'HOT ' + $t('apps')"/>
    </a-layout-content>
    <a-layout-footer>
      <Footer/>
    </a-layout-footer>
  </a-layout>
</template>

<script setup>
import Header from '~/components/Header.vue'
import Footer from '~/components/Footer.vue'
import {useI18n} from 'vue-i18n'
const { locale } = useI18n()
console.log(locale)
const hotGames = ref([])
const hotApps = ref([])
// 使用defineProps获取错误信息
const props = defineProps({
  error: Object
})
const loadIndex = async () => {
  try {
    const { data, error } = await useApi('/api/app/getAppCategoryList', {
      method: 'GET',
      params: {
        language: 'en',
        category_id: '1,2,3,4,5'
      }
    })
    if (error.value) {
      console.error('加载数据失败:', error.value)
      return
    }      
    hotApps.value = data.value.top_downloads_app.slice(0, 9);
    hotGames.value = data.value.hot_games.slice(0, 8);
    
  } catch (err) {
    console.error('请求出错:', err)
  }
}
loadIndex()
// 获取错误对象
const error = props.error

// 处理错误的方法
const handleError = () => {
  // 清除错误并返回首页
  clearError({ redirect: '/' })
}
const config = useRuntimeConfig();
// 设置页面元数据，对SEO友好
useHead({
  title: 'Error - APKDock',
  meta: [
    {
      name: 'description',
      content: error.statusCode === 404 
        ? '抱歉，您访问的页面不存在或已被移除。' 
        : '抱歉，服务器发生了错误。'
    },
    {
      name:'robots',
      content:'noindex,nofollow'
    },
  ],
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify(structuredData),
      dangerouslyDisableSanitizers: ['innerHTML']
    }
  ],
})
</script>

<style scoped lang="less">
@import url('https://fonts.googleapis.com/css2?family=Rubik+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
.errorContent{
  width:100%;
  padding:1rem;
  margin-top:2rem;
  .title{
    color: var(--Text-Text, #505662);
    text-align: center;
    font-family: Roboto;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 133.333% */
  }
  .dec{
    color: var(--Text-Placeholder, #9DA2AD);
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
  }
  .search{
    width: 100%;
    display: flex;
    justify-content:  center;
    gap: 1rem;
    margin:1rem 0;
    .text{
      color: #FFF;
      font-family: Roboto;
      font-size: 15px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
    }
    .btn{
      // 不允许选中
      user-select: none;
      cursor: pointer ;
      display: flex;
      min-height: 40px;
      padding: 0px 12px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      background: #775CE1;
      border-radius: 4px;
    }
  }
}
.site-layout-content {
  min-height: 280px;
  padding: 24px;
  background: #fff;
}

#components-layout-demo-top .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

:deep(.ant-layout-header) {
  background: #fff;
  height: 72px;
  padding: 0 245px;
}
:deep(.ant-layout-footer) {
  background-color: #ffffff;
  padding: 0 245px;
}

:deep(.ant-layout-content) {
  background-color: #F9FAFB !important;
  padding: 0 245px !important;
}


:deep(.ant-input-affix-wrapper) {
  width: 18.5rem;
}


@media screen and (max-width: 768px) {
  :deep(.ant-layout-content) {
    background-color: #F9FAFB !important;
    padding: 0 16px !important;
  }
  :deep(.ant-layout-header) {
    background: #fff;
    height: 72px;
    padding: 0 16px;
  }
  :deep(.ant-layout-footer) {
    padding: 0 16px;
  }
}
</style>